/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiDataGridHeader {
  display: flex;
  z-index: 3; // Needs to sit above the content and focused cells
  background: $ouiColorEmptyShade;
  position: sticky; // In IE11 this does not work, but doesn't cause a break.
  top: 0;
}

@include ouiDataGridHeaderCell {
  @include ouiFontSizeS;

  font-weight: $ouiFontWeightBold;
  padding: $ouiDataGridCellPaddingM;
  flex: 0 0 auto;
  position: relative;
  align-items: center;
  display: flex;

  > * {
    max-width: 100%;
    width: 100%;
  }

  &.ouiDataGridHeaderCell--numeric {
    text-align: right;
  }

  &.ouiDataGridHeaderCell--currency {
    text-align: right;
  }

  &:focus {
    @include ouiDataGridCellFocus;
    border-top: none;
  }

  // We only truncate if the cell is not a control column.
  &:not(.ouiDataGridHeaderCell--controlColumn) {
    &:focus-within {
      @include ouiDataGridCellFocus;
      border-top: none;
    }

    .ouiDataGridHeaderCell__sortingArrow {
      margin-right: $ouiSizeXS;
    }

    .ouiDataGridHeaderCell__anchor {
      width: 100%;
    }

    .ouiDataGridHeaderCell__button {
      flex: 0 0 auto;
      position: relative;
      align-items: center;
      display: flex;
      width: 100%;
      font-weight: $ouiFontWeightBold;
      outline: none;

      .ouiDataGridHeaderCell__sortingArrow {
        flex-grow: 0;
      }
    }

    .ouiDataGridHeaderCell__content {
      @include ouiTextTruncate;
      overflow: hidden;
      white-space: nowrap;
      text-align: left;
      flex-grow: 1;
      align-self: baseline;
    }

    .ouiDataGridHeaderCell__icon {
      flex-grow: 0;
      flex-basis: auto;
      width: auto;
      padding-left: $ouiSizeXS;
    }
  }
}

.ouiDataGridHeader__action--selected {
  // sass-lint:disable-block no-important
  font-weight: $ouiFontWeightBold !important;
}

// Header alternates
// Often these need extra specificity because they need to gracefully clash with the border settings

@include ouiDataGridStyles(bordersNone, bordersHorizontal) {
  .ouiDataGridHeader {
    background: $ouiColorEmptyShade;
  }
}

@include ouiDataGridStyles(headerUnderline) {
  @include ouiDataGridHeaderCell {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: $ouiBorderThick;
    border-bottom-color: $ouiTextColor;
  }
}

@include ouiDataGridStyles(bordersNone, headerUnderline) {
  @include ouiDataGridHeaderCell {
    border-bottom: $ouiBorderThick;
    border-color: $ouiTextColor;
  }
}

@include ouiDataGridStyles(headerShade) {
  @include ouiDataGridHeaderCell {
    background: tintOrShade($ouiColorLightestShade, 0%, 10%);
  }
}

@include ouiDataGridStyles(headerShade, bordersAll) {
  @include ouiDataGridHeaderCell {
    border-right: $ouiBorderThin;
    border-bottom: $ouiBorderThin;
    border-left: none;

    &:first-of-type {
      border-left: $ouiBorderThin;
    }
  }
}

@include ouiDataGridStyles(headerShade, bordersHorizontal) {
  @include ouiDataGridHeaderCell {
    border-top: none;
    border-bottom: $ouiBorderThin;
  }
}

// Border alternates
@include ouiDataGridStyles(bordersNone) {
  @include ouiDataGridHeaderCell {
    border: none;
  }
}

@include ouiDataGridStyles(borderhorizontal) {
  @include ouiDataGridHeaderCell {
    border-top: none;
    border-right: none;
    border-left: none;
  }
}

// Font alternates
@include ouiDataGridStyles(fontSizeSmall) {
  @include ouiDataGridHeaderCell {
    @include ouiFontSizeXS;
  }
}

@include ouiDataGridStyles(fontSizeLarge) {
  @include ouiDataGridHeaderCell {
    @include ouiFontSize;
  }
}

// Padding alternates
@include ouiDataGridStyles(paddingSmall) {
  @include ouiDataGridHeaderCell {
    padding: $ouiDataGridCellPaddingS;
  }
}

@include ouiDataGridStyles(paddingLarge) {
  @include ouiDataGridHeaderCell {
    padding: $ouiDataGridCellPaddingL;
  }
}

@include ouiDataGridStyles(noControls, bordersAll) {
  @include ouiDataGridHeaderCell {
    border-top: $ouiBorderThin;
  }
}

@include ouiDataGridStyles(noControls, bordersHorizontal) {
  @include ouiDataGridHeaderCell {
    border-top: $ouiBorderThin;
  }
}
